﻿@section header
{<!-- Bellows Styles -->
    <link href="~/Themes/RongJi/Style/base/css/category.css" rel="stylesheet" />
}
@section title
{
    蓉记鲜鲜鲜
}
@section pagetitle
{
    分类
}
<div class="box">
    <!--Begin Header-->
    <header class="pageHeader"><img src="~/Themes/RongJi/Style/base/imgs/rongji_banner.png"></header>
    <!--End Header-->
    <!-- InstanceBeginEditable name="body" -->
    <div class="mainwarpper">
        <aside>
            <input type="hidden" value="@Model.AllSubCategoriesJSON" id="allSubCategories">
            <ul>
                @foreach (var item in Model.Categories)
                {
                    <li>
                        <a href="javascript:;" onclick="getSubCategories(@item.CategoryId,'@item.CategoryName')">
                            @Html.Raw("<img src=/Themes/RongJi/Style/base/imgs/sort/category/" + @item.CategoryId + ".jpg alt=" + @item.CategoryName + ">")
                        </a>
                    </li>
                }
            </ul>
        </aside>
        <section>
            <header>
                <span id="parentCategoryName">全部</span>
            </header>
            <ul id="subSubCategoryRegion">
                @*/*---- 为了显示商品，注释掉，以后恢复 ----*/*@
                @foreach (var item in Model.SubCategories)
                {
                    <li>
                        <a href="../Product/ProductList?sid=@item.CategoryId">
                            <div class="inner">
                                @Html.Raw("<img src=/Themes/RongJi/Style/base/imgs/sort/subcategory/" + @item.CategoryId + ".jpg alt=" + @item.CategoryName + ">")
                                <p>@item.CategoryName</p>
                            </div>
                        </a>
                    </li>
                }
            </ul>
        </section>
    </div>
</div>
@section footer
{
    <script type="text/javascript" src="~/Utility/pages/regionSelector_FileData.js"></script>
    <script type="text/javascript">
        $(function () {
            //让底部toolbar选中
            var $homeImg = $("#homeImg");
            var $categoryImg = $("#categoryImg");
            var $myaccountImg = $("#myaccountImg");
            var $searchImg = $("#searchImg");

            $homeImg.attr("src", "/Themes/RongJi/Style/base/imgs/f10.png");
            $categoryImg.attr("src", "/Themes/RongJi/Style/base/imgs/f2_c.png");
            $myaccountImg.attr("src", "/Themes/RongJi/Style/base/imgs/f3.png");
            $searchImg.attr("src", "/Themes/RongJi/Style/base/imgs/f4.png");
        });

        //根据二级分类的id得到对应的三级分类
        var getSubCategories = function (categoriesId, categoriesName) {
            var $allSubCategories = $("#allSubCategories").val();
            var $subCategoryList = $.parseJSON($allSubCategories);
            var $parentCategoryName = $("#parentCategoryName");
            var $subSubCategoryRegion = $("#subSubCategoryRegion");

            if (categoriesId != -1) {
                document.title = categoriesName;
            }

            $subSubCategoryRegion.empty();//先清空
            $parentCategoryName.html(categoriesName);//插入二级分类的名称


            /*---- 为了显示商品，注释掉，以后恢复 ----*/
            for (var i = 0; i < $subCategoryList.length; i++) {
                var $subCategory = $subCategoryList[i];
                if ($subCategory.ParentCategoryId == categoriesId) {
                    $subSubCategoryRegion.append('<li>' +
                                                    '<a href="../Product/ProductList?sid=' + $subCategory.CategoryId + '">' +
                                                        '<div class="inner">' +
                                                           '<img src="/Themes/RongJi/Style/base/imgs/sort/subcategory/' + $subCategory.CategoryId + '.jpg" alt="' + $subCategory.CategoryName + '">' +
                                                           '<p>' + $subCategory.CategoryName + '</p>' +
                                                        ' </div>' +
                                                    ' </a>' +
                                                 '</li>');
                }
            }

        };
    </script>
}